<template>
  <div class="container">
    <div class="chart">
      <PieChart :optionsData="optionsData" />
    </div>
    <div class="title">
      <div v-for="(item, index) in optionsData" :key="index">
        {{ item.name }}<span :style="item.itemStyle">{{ item.value }} </span>个
      </div>
    </div>
  </div>
</template>
<script>
import PieChart from '@views/website/piechart.vue'
export default {
  name: 'CenterItem6',
  components: {
    PieChart
  },
  data() {
    return {
      optionsData: [
        {
          name: '重大风险',
          value: 4256,
          itemStyle: {
            color: '#2A71FF'
          }
        },

        {
          name: '较大风险',
          value: 2356,
          itemStyle: {
            color: '#00EDFE'
          }
        },
        {
          name: '中等风险',
          value: 2018,
          itemStyle: {
            color: '#FEDB4B'
          }
        },
        {
          name: '较小风险',
          value: 1998,
          itemStyle: {
            color: '#FE7C2F'
          }
        },
        {
          name: '轻微风险',
          value: 1998,
          itemStyle: {
            color: '#FE1C2F'
          }
        }
      ],
      option: {
        grid: {
          top: '20',
          left: '10',
          right: '10',
          bottom: '20'
        },
        options3d: {
          enabled: true,
          alpha: 45,
          beta: 0
        },
        series: [
          {
            name: 'Nightingale Chart',
            type: 'pie',
            startAngle: 180,
            radius: [40, 60],
            center: ['50%', '50%'],
            label: {
              show: false,
              position: 'center'
            },
            data: [
              { value: 60465, name: '雁塔区' },
              { value: 50587, name: '未央区' },
              { value: 48562, name: '碑林区' },
              { value: 46598, name: '莲湖区' },
              { value: 39879, name: '新城区' },
              { value: 36561, name: '灞桥区' },
              { value: 32356, name: '长安区' }
            ]
          }
        ]
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  display: flex;
  height: 100%;
  justify-content: space-between;
  .chart {
    width: 40%;
    height: 100%;
  }
  .title {
    width: 50%;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    align-items: center;
    justify-content: center;
    span {
      font-size: 16px;
      padding: 5px 10px;
    }
  }
}
</style>
